<template>
    <div v-if="userInfo">
        <el-avatar :size="120" :src="imgBaseURL + userInfo.avatar" />
        <el-dialog v-model="fileUploadVisible" title="上传头像" width="500" :before-close="handleClose">
            <el-upload drag :action="VITE_UPLOAD_API_BASE_URL" :on-success="uploadFileSucess"
                :show-file-list="false" name="fileList" accept=".jpg, .png, .bpm">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="cm-upload-text">
                    点击或拖动头像到此处上传
                </div>
                <div class="el-upload__tip">
                    支持 .jpg, .png, .bpm 类型头像
                </div>
            </el-upload>
            <el-form label-position="top">
                <el-form-item label="昵称">
                    <el-input v-model="userInfo.nickName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="userInfo.tele"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input type="number" v-model="userInfo.age"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-segmented v-model="userInfo.sex" :options="['男', '女']" size="large" />
                </el-form-item>
                <el-form-item label="教育阶段">
                    <el-segmented v-model="userInfo.edu" :options="['小学', '初中', '高中', '本科', '硕士', '博士']" size="large" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="userInfo.password"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="fileUploadVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateUserInfo">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-descriptions title="个人信息" :column="2" :size="size" border style="margin-top: 20px;">
            <template #title>
                <h1 class="title">个人信息</h1>
            </template>
            <template #extra>
                <el-button type="primary" @click="fileUploadVisible = true" >
                    <el-icon>
                        <Edit />
                    </el-icon>
                    编辑</el-button>
            </template>
            <el-descriptions-item label="ID">
                {{ userInfo.id }}
            </el-descriptions-item>
            <el-descriptions-item label="账号">
                {{ userInfo.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
                {{ userInfo.nickName }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                {{ userInfo.sex }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
                {{ userInfo.age }}
            </el-descriptions-item>
            <el-descriptions-item label="教育阶段">
                {{ userInfo.edu }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
                {{ userInfo.tele }}
            </el-descriptions-item>
        </el-descriptions>

        <div style="margin-top:20px">
            
            <h1 class="title">问卷集合</h1>
            <el-tabs type="border-card">
                <el-tab-pane label="发布的问卷">
                    <div>
                        <el-table  table-layout='auto'       highlight-current-row
                            :data="qnList.slice((pagination.curPage - 1) * pagination.pageSize, pagination.curPage * pagination.pageSize)"
                            border style="width: 100%">
                            <el-table-column prop="id" label="ID" width="70" />
                            <el-table-column prop="title" label="标题" />
                            <el-table-column prop="type" label="类型" width="180" />
                            <el-table-column label="问题数量" width="120">
                                <template #default="scope">
                                    {{ scope.row.questionList.length }}
                                </template>
                            </el-table-column>
                            <el-table-column label="问题类型">
                                <template #default="scope">
                                    {{ [...new Set(scope.row.questionList.map((i) => { return i.typeCN }))].join(',') }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template #default="scope">
                                    <el-button type="primary" text size="small"
                                        @click="() => { this.$router.push(`/doQN/${scope.row.id}`) }">预览</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination">
                        <el-pagination v-model:current-page="pagination.curPage" v-model:page-size="pagination.pageSize"
                            :page-sizes="[10, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                            :total="qnList.length" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="填写的问卷">User</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { POST } from '../../util/axios.js'
import { ElMessage } from 'element-plus'
import { useUserStore } from "../../store/userStore.js";
export default {
    data() {
        return {
            fileUploadVisible: false,
            form: { id: "" },
            userInfo: null,
            fileList: [],
            qnList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            },
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL,
            VITE_UPLOAD_API_BASE_URL:import.meta.env.VITE_UPLOAD_API_BASE_URL,
        }
    },
    methods: {

        uploadFileSucess(response) {
            if (response.code != 200) {
                ElMessage.error('文档上传失败')
            } else {
                console.log(response)
                this.userInfo.avatar = response.data[0].url

            }
            // this.updateUserInfo()
        },
        async updateUserInfo() {
            let rs = await POST('/user/updateUserInfo', 'POST', this.userInfo, true, null, true)
            console.log("查询结果:::", rs)
            this.userInfo = rs.data
            const userStore = useUserStore();
            userStore.setUserInfo(rs.data)
            this.fileUploadVisible = false
        },
        async getUserInfoByID() {
            let rs = await POST('/user/getUserInfoByID', 'POST', this.form, false, null, false)
            console.log("查询结果:::", rs)
            this.userInfo = rs.data
        },

        async getQNList() {
            let rs = await POST('/questionnaire/getQNListByUser', 'POST', this.form, false, null, false)
            this.qnList = rs.data
            console.log("获取用户创建的问卷结果:::", rs)
        },
    },
    mounted() {
        let id = this.$route.params.id || null
        if (id) {
            this.form.id = id
            this.getUserInfoByID()
        }

        this.getQNList()
    }
}
</script>
<style></style>